<template>
  <div class="charHeader">
    <div class="left-container">
      <div class="workflow-name" :title="store.workflowInfo.name" @click="rightDrawerOpen()">
        {{ store.workflowInfo.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, computed } from "vue"
// import { mapGetters, mapMutations } from 'vuex'
import { designerStore } from 'src/stores/designerTool/designerTool'
const store=designerStore()
function rightDrawerOpen(){
  console.log("触发")
}

// export default {
//   name: 'CharHeader',
//   components: { },
//   data() {
//     return {}
//   },
//   computed: {
//     ...mapGetters([
//       'workflowInfo'
//     ])
//   },
//   methods: {
//     ...mapMutations({
//       setRightDrawer: 'settings/SET_RIGHT_DRAWER',
//       setSelectedId: 'settings/SET_SELECTED_ID'
//     }),
//     rightDrawerOpen() {
//       this.setSelectedId()
//       this.setRightDrawer(true)
//     }
//   }
// }
</script>

<style lang="scss" scoped>
.charHeader {
  display: flex;
  align-items: center;
  padding: 0 18px;
  height: 36px;
  border-bottom: 1px solid #dcdee2;
  .left-container{
    flex: 1;
    display: flex;
  }
  .workflow-name{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor:pointer;
  }
}
</style>
